/*******************************发送分页查询ajax请求******************************/
function PageFind() {
    //1.获取输入框上的值
    //2.发送ajax
    $.ajax({
        url: "role/findAll",
        type: "post",
        dataType: "JSON",
        data: {},
        success: function(list) {
            //数据插入函数
            showTableData(list);
        }
    })
}

//发送ajax
PageFind();

function showTableData(dataList) {
    //2.设置表格数据
    //2.1清空表格
    $('#tableData').html('');
    //2.2遍历数据
    var trs = '';
    for (var i = 0; i < dataList.length; i++) {
        var dataDetail = dataList[i];
        //判断修改数据
        //改日期
        var cDate = new Date(dataDetail.roleCtime).format('yyyy-MM-dd hh:mm:ss');
        var stateName;
        console.log(dataDetail);
        if(dataDetail.roleState == 1){
            stateName ='启用';
        }else {
            stateName ='禁用';
        }
        var tr = `
               <tr>
                    <td>${dataDetail.roleId}</td>
                    <td>${dataDetail.roleName}</td>
                    <td>${cDate}</td>
                    <td hidden="hidden">${dataDetail.roleState}</td>
                    <td>${stateName}</td>
                    <td>
                        <button class="btn btn-mini " type="button" id="updateBtn">编辑</button>
                        <button class="btn btn-mini " type="button" id="deleteBtn">删除</button>
                    </td>
                </tr>`;
        //添加数据
        trs += tr;
    }
    //2.3将数据加入
    $('#tableData').html(trs);
    //4.更新事件
    $('[id = updateBtn]').click(function() {
        //设置账号
        var RoleId =$(this).parent().parent().find('td').eq(0).html();
        $('#updateRoleId').val(RoleId);
        $('#updateRoleName').val($(this).parent().parent().find('td').eq(1).html());
        $('#updateState').val($(this).parent().parent().find('td').eq(3).html());
        //显示菜单
        allMenuShowAjax('#updateMenuShow');
        $.ajax({
            url: "menu/findMenuByRoleId",
            type: "post",
            data: {RoleId:RoleId},
            dataType: "JSON",
            success: function(list) {
                fillCheckBox(list);
                //显示弹窗
                showPanel('#update');
            }
        });
    });
    //4.更新事件
    $('[id = deleteBtn]').click(function() {
        //设置账号
        var roleId = $(this).parent().parent().find('td').eq(0).html();
        //显示弹窗
        layer.confirm('是否删除', {
            btn: ['确定','取消'] //按钮
        }, function(){
            deleteAjax(roleId);
        }, function(){
            layer.msg('已经取消', {icon: 1});
        });
    });
}
/* *****************增加菜单事件********************/
$('#addBtn').click(function () {
    $('#addRoleId').val('');
    $('#addRoleName').val('');
    $('#addState').val(1);
    //显示菜单
    allMenuShowAjax('#menuShow');
    //弹出窗口
    showPanel('#add');
});

/************************显示菜单***************************/
function allMenuShowAjax(inputId) {
    //发送AJAX查询所以菜单
    //1.发送ajax
    $.ajax({
        url: "menu/findAll",
        type: "post",
        data: {},
        dataType: "JSON",
        success: function(list) {
            menuShow(list,inputId);
        }
    });
}
//显示菜单的函数
function menuShow(list,inputId) {
    //总内容
    var allDiv = '';
    console.log(list);
    //遍历
    for (var i = 0; i < list.length; i++) {
        var firstMenu = list[i];
        if (firstMenu.pmenuId == 0) {
            //一级元素
            var divBlock = `<div class="col-sm-4">
                                <h3><input type="checkbox"  value="${firstMenu.menuId}">${firstMenu.menuName}</h3>`;
            //遍历二级元素
            for (var j = 0; j < list.length; j++) {
                var secondMenu = list[j];
                //如果二级元素是一起元素的子，就执行
                if (secondMenu.pmenuId == firstMenu.menuId) {
                    var checkboxDiv = `<div class="checkbox">
                                        <label>
                                            <input type="checkbox"  value="${secondMenu.menuId}">
                                            ${secondMenu.menuName}
                                        </label>
                                       </div>`;
                    divBlock += checkboxDiv;
                }
            }
            //二级元素遍历完,结尾html内容
            divBlock += `</div>`;
            //总内容汇总
            allDiv += divBlock;
        }
    }
    //遍历完成之后,显示在页面上
    $(inputId).html(allDiv);
    //子点击事件
    $(inputId).find('.checkbox input').click(function() {
        if ($(this).prop('checked') == true) {
            $(this).parent().parent().parent().find('h3 input').prop('checked', true);
        }
    });
    //父点击事件
    $(inputId).find('.col-sm-4 h3 input').click(function() {
        if ($(this).prop('checked') == false) {
            $(this).parent().parent().find('.checkbox input').prop('checked', false)
        }
    });
}

/**************增加事件**************/
function addAjax() {
    //1.获取参数
    var roleId=  $('#addRoleId').val();
    var roleName=  $('#addRoleName').val();
    var roleState= $('#addState').val();
    //1.2菜单
    var menuIdArr = new Array();
    //遍历
    $('#menuShow input').each(function(i, domEle) {
        if ($(domEle).prop('checked') == true) {
            menuIdArr.push($(domEle).val());
        }
    });
    //2.发送ajax
    $.ajax({
        url: "role/add?menuIdList="+menuIdArr,
        type: "post",
        dataType: "JSON",
        contentType:"application/json;charset=UTF-8",
        data: JSON.stringify({
            roleId: roleId,
            roleName: roleName,
            roleState: roleState
        }),
        success: function(data) {
            if(data.id == 1){
                layer.msg(data.message, {icon: 1});
                PageFind();
                hide('#add');
            }else {
                layer.msg(data.message, {icon: 1});
            }
        }
    });
};
/* **********************发送修改密码AJAX*********************** */
function updateAjax() {
    //1.获取参数
    var roleId=  $('#updateRoleId').val();
    var roleName=  $('#updateRoleName').val();
    var roleState= $('#updateState').val();
    //1.2菜单
    var menuIdArr = new Array();
    //遍历
    $('#updateMenuShow input').each(function(i, domEle) {
        if ($(domEle).prop('checked') == true) {
            menuIdArr.push($(domEle).val());
        }
    });

    //3.发送AJAX
    $.ajax({
        url: "role/update?menuIdList="+menuIdArr,
        type: "post",
        dataType: "JSON",
        contentType:"application/json;charset=UTF-8",
        data: JSON.stringify({
            roleId: roleId,
            roleName: roleName,
            roleState: roleState
        }),
        success: function(data) {
            if (data.id == 1) {
                //修改成功
                layer.msg(data.message, {icon: 1});
                hide('#update');
                PageFind();
            } else if (data.id == 0) {
                //修改失败
                layer.msg(data.message, {icon: 1});
            }
        }
    })
};
/******************填充*******************/
// 填充checkBox
function fillCheckBox(list) {
    //遍历集合
    for (var i = 0; i < list.length; i++) {
        var menuRole = list[i];
        //遍历元素
        $('#updateMenuShow input').each(function(i, domEle) {
            if ($(domEle).val() == menuRole.menuId) {
                $(domEle).prop('checked', true);
            }
        });
    }
}
/**********删除*****/
function deleteAjax(roleId) {
    $.ajax({
        url: "role/delete?roleId="+roleId,
        type: "post",
        dataType: "JSON",
        contentType:"application/json;charset=UTF-8",
        data: {},
        success: function(data) {
            if (data.id == 1) {
                //删除成功
                PageFind();
                layer.msg(data.message, {icon: 1});
            } else if (data.id == 0) {
                layer.msg(data.message, {icon: 1});
            }
        }
    });
}
/***********************************************/
$('#uiui').click(function () {

});